/**
 * MapRangeDialog
 */
/*
 *
 * 1.外部调入 ./components/Recognize/index  saveRecognizeProperty  传入数据
 * 2.外部调入 ./components/Recognize/index  setState  改变positionLimitDialog
 *
 * */
  var React = require("react");
  var tool = require("../../../utils/tool");
  var MapRangeDialog = React.createClass({
    getDefaultProps: function (){
        return {
            data: {}
        }
    },
    getInitialState: function (){
        return {
            sw: [],
            ne: [],
            level: 3
        }
    },
    componentWillMount: function (){
        // 固定容器左下角和右上角容器坐标
        this.CONST = {
            SW: {
                X: 0,
                Y: 420
            },
            NE: {
                X: 720,
                Y: 0
            }
        };

        this.iframe = this.getIframe();
        this.iframe.on("load", function (){
            this.iframe[0].contentWindow.mapChanged = this.mapChanged;
            this.setBounds = this.iframe[0].contentWindow.setBounds;
            this.setZoom = this.iframe[0].contentWindow.setZoom;
            this.getZoom = this.iframe[0].contentWindow.getZoom;
            // 容器像素坐标转地图经纬度
            this.pixelTolnglat = this.iframe[0].contentWindow.pixelTolnglat;
            this.setCurrentCity = this.iframe[0].contentWindow.setCurrentCity;

            var sw = this.state.sw, ne = this.state.ne, level = this.state.level;
            if (sw.length && ne.length){
                if (level){
                    this.setZoom(level);
                }
                this.setBounds(sw, ne);
            } else {
                this.setMapRange();
                this.setCurrentCity();
            }
        }.bind(this));

        var data = this.props.data;
        if (data && !tool.isEmptyObject(data)){
            this.setState({
                sw: data.sw || [],
                ne: data.ne || [],
                level: data.level || 3
            });
        }
    },
    componentDidMount: function (){
        this.iframe.appendTo($(this.refs.map));
    },
    getIframe: function (){
        return $("<iframe>").attr({
            width: "720",
            height: "420",
            frameborder: 0,
            allowtransparency: 1,
            src: window.is.CONST.urls.limit
        });
    },
    setMapRange: function (){
        var swAxes = this.pixelTolnglat(this.CONST.SW.X, this.CONST.SW.Y),
            neAxes = this.pixelTolnglat(this.CONST.NE.X, this.CONST.NE.Y);

        this.setState({
            sw: [swAxes.lng, swAxes.lat],
            ne: [neAxes.lng, neAxes.lat]
        });
    },
    saveData: function (param){
        const {data,saveRecognizeProperty}=this.props;
        saveRecognizeProperty({
            position_limit: $.extend(data, param)
        });
    },
    mapChanged: function (){
        this.setMapRange();
    },
    handleOnCloseDialog: function (){
        this.props.updateState({
            positionLimitDialog: ""
        });
    },
    handleOnSubmit: function (type, e){
        var level = this.getZoom();
        var param = {
            level: level,
            sw: this.state.sw,
            ne: this.state.ne
        };
        this.saveData(param);
        this.handleOnCloseDialog();
    },
    render: function (){
        return (
            <div className="dialog-wrap">
                <div className="dialog-overlay"></div>
                <dialog>
                    <div className="dialog-content">
                        <div className="title-region">
                            <i className="map-icon"></i>
                            <span>地图区域</span>
                        </div>
                        <div className="content-region">
                            <div ref="map" className="map">
                            </div>
                            <div className="tip">
                                在地图中鼠标滚轮缩放或按住鼠标左键拖移来调整地图区域
                            </div>
                            <div className="axes">
                                <div className="icon-region">
                                    <i></i>
                                </div>
                                <div className="axes-region">
                                    <span className="axes-item">
                                        <span className="title">西南</span>
                                        {
                                            this.state.sw.map(function (axes, index){
                                                return (
                                                    <span key={ "axes-sw-" + index } className="axes-unit">{axes + (index === 0 ? "，" : "")}</span>
                                                )
                                            })
                                        }
                                    </span>
                                    <span className="axes-item">
                                        <span className="title">东北</span>
                                        {
                                            this.state.ne.map(function (axes, index){
                                                return (
                                                    <span key={ "axes-ne-" + index } className="axes-unit">{axes + (index === 0 ? "，" : "")}</span>
                                                )
                                            })
                                        }
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div className="button-region">
                            <div className="button" onClick={ this.handleOnSubmit }>确定</div>
                        </div>
                    </div>
                    <a href="#" className="modal-close icon-close" onClick={ this.handleOnCloseDialog }></a>
                </dialog>
            </div>
        )
    }
  });

  module.exports = MapRangeDialog;
